<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no">	
    <meta name="x5-orientation"content="portrait"> <!-- QQ强制竖屏 -->
    <meta name="screen-orientation" content="portrait"> <!-- UC强制竖屏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 移除iphone菜单 -->
	<title>时间线故事</title>
	<link rel="stylesheet" type="text/css" href="css/time.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>

	<!-- 预加载文件 -->
	<link rel="prefetch prerender" href="audio/time.mp3" />
</head>
<body>
	<!-- 音乐 -->
	<audio id="audio" loop="" preload="load"><source src="audio/time.mp3"></audio>

	<!-- 打开页面 -->
	<section class="content" >
		<a href="javascript:;" class="start">loading...</a>
	</section>

	<!-- 标题页op 01-->
	<section class="page-1 page-1-effect">
		<div class="tmap">
			<div class="tittop">Tomo<img src="img/Logo.svg" height="55"></div>
			<div class="titbod">爱摄影·妙生活</div>
		</div>

		<!-- 搜索框 -->
		<div class="search">
			<img class="hand" src="img/hand.svg">
			<input type="text" value="反手摸肚脐">
		</div>

		<div class="fanpai fanpai-in">
			<h1>又是反手摸肚脐</h1>	
			<p>2015.07.13</p>
			<p>反手摩肚脐，秀出好身材</p>
		</div>
	</section>

	<!-- 引导页 02-->
	<section class="page-2 page-2-effect">
		<div class="timealy timealy-loc">
			<div class="past">北京</div>
			<div class="mask"></div>
			<div class="poinline"></div>
			<p class="ptago">2015.7.18</p>
			<h2>By 安兔兔</h2>
		</div>
	</section>
	
	<!-- 照片页 03-->
	<section class="page-3">
		<div class="light"><img src="img/lin1.png"></div>
		<div class="camera">

			<div class="photobox">
				<div id="photo1" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/001.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo2" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/002.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo3" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/01.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo4" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/02.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo5" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/03.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo6" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/04.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo7" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/05.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo8" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/06.jpg"></div>
				</div>
			</div>

			<div class="photobox">
				<div id="photo9" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/07.jpg"></div>
				</div>
			</div>	

			<div class="photobox">
				<div id="photo10" class="photo">
					<dl class="headmov">
						<dt><img src="img/photo/0.jpg" width="50"></dt>
						<dd>
							<h3>Mr Toma</h3>
							<p>2015-07-16</p>
						</dd>
					</dl>
				<div class="photo-mask">
					<span>人气：123&nbsp;&nbsp;&nbsp;点赞：12</span>
				</div>
				<div class="photo-box"><img src="img/photo/08.jpg"></div>
				</div>
			</div>	

		</div> <!-- camera ED -->
	</section>

	<!-- 照片墙 04-->
	<section class="page-4">
		<ul class="card">
			<li><img src="img/photo/01.jpg"></li>
			<li><img src="img/photo/02.jpg"></li>
			<li><img src="img/photo/03.jpg"></li>
			<li><img src="img/photo/002.jpg"></li>
			<li><img src="img/photo/05.jpg"></li>
			<li><img src="img/photo/06.jpg"></li>
			<li><img src="img/photo/07.jpg"></li>
			<li><img src="img/photo/08.jpg"></li>
			<li><img src="img/photo/001.jpg"></li>
		</ul>
	</section>

	<!-- 结束ED -->
	<section class="mvend">
		<div class="tittop">Tomo<img src="img/Logo.svg" height="55"></div>
		<div class="endbtn">
		<a href="">参与话题</a>
		<a href="">重播</a>
		<a href="">下载App</a>
		</div>	
	</section>
	<div class="back"></div>
<script>

</script>
</body>
</html>